<template>
  <div class="header">
      <div class="leftBox">
          <p class="iconExpand"><i class="iconfont icon-icon-navicon expanded" @click="expend()"></i></p>
          <p>导航</p>
      </div>
      <div  class="rightBox">
           <p class="portalName">{{env.portalName}}</p>
           <div class="rightTopMenu">
                    <!-- 设置 -->
                    <el-dropdown class="user-name rightspace right" trigger="click">
                        <span class="el-dropdown-link">
                            {{userName}} <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <a href="javascript:void(0)" @click="switGlobalSet" class="lista">
                                <el-dropdown-item class="el-dropdown-item"><i class="el-icon-film"></i>全局设置</el-dropdown-item>
                            </a>
                            <a href="javascript:void(0)" @click="dialogWorkBenchFn" class="lista">
                                <el-dropdown-item class="el-dropdown-item"><i class="el-icon-house"></i>重置工作台</el-dropdown-item>
                            </a>
                            <a href="javascript:void(0)" @click="pageSetDialogOpen" class="lista">
                                <el-dropdown-item class="el-dropdown-item"><i class="el-icon-setting"></i>页面设置</el-dropdown-item>
                            </a>
                            <a href="javascript:void(0)" @click="passwordDialogOpen" class="lista" v-if="showPassword==='Y'">
                                <el-dropdown-item class="el-dropdown-item"><i class="el-icon-edit"></i>修改密码</el-dropdown-item>
                            </a>
                            
                            <el-dropdown-item command="loginout" class="el-dropdown-item" @click.native="logout"><i class="el-icon-news"></i>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- 全屏显示 -->
                    <div class="btn-fullscreen right rightspace" @click="handleFullScreen">
                        <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                            <i class="iconfont el-icon-rank cursorP"></i>
                        </el-tooltip>
                    </div>
                    <!-- 主题切换 -->
                    <el-dropdown class="right rightspace downTheme">
                        <p class="cursorP">
                            {{currentRoleTheme.themeName}}
                            <i class="iconfont icon-jiantouarrow486 bot"></i>
                        </p>
                        <el-dropdown-menu slot="dropdown">
                            <ul class="themeList">
                                <a href="javascript:void(0);"  v-for="(item,index) in roleTheme" :key="item.id" @click="roleThemeFn(item,index)">
                                    <el-dropdown-item :class="index==themeIndex?'fontColor':''">{{index==themeIndex?'当前：':''}}
                                        {{item.themeName}}
                                    </el-dropdown-item>
                                </a>
                            </ul>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- 年份 -->
                    <!-- <div class="right rightspace yearBox">
                        
                        <el-popover
                            placement="bottom"
                            title="标题"
                            trigger="click">
                            <ul>
                                <li>1009</li>
                            </ul>
                            <div slot="reference" style="height:22px">
                                2021
                                <i class="iconfont icon-jiantouarrow486 bot"></i>
                            </div>
                        </el-popover>
                    </div> -->
                    <!-- 搜索 -->
                    <div class="right rightspace searchBox ">
                        <el-input
                            placeholder="请输入关键字"
                            v-model="searchValue">
                            <i class="el-icon-search" @click="searchFn" style="padding-right:10px" slot="suffix" type="text"></i>
                        </el-input>
                    </div>
           </div>
           <div class="tags_gd">
                <ul>
                    <li class="tags-li" v-for="(item,index) in tagList" :key="index" 
                    :class="{'active': isActive(item.url), 'closable': index === 0}" 
                    :style="`left:${-20*index}px;z-index:${100-index}`" @click="switchTag(item.url)">
                        <span class="leftTab"></span>
                        <span class="centerTab">{{item.title}}</span>
                        <span class="rightTab"></span>
                        <i class="el-icon-close tagClose"  v-if="index !== 0" @click.stop="closeTag(index)"></i>
                        <div class="clearfix"></div>
                    </li>
                    
                </ul>
            </div>
            <div class="serviceCall">客服热线 400-800-8820</div>
      </div>
      
      <el-drawer
        title="布局设置"
        :visible.sync="drawer"
        size="20%"
        @close="closeALL">
            <p>切换主题颜色</p>
            <ul id="spectrumPalette">
                <li v-for="item in spectrumPaletteDate" :key="item.id" :style="`background:${item.code}`" @click="setThemeColor(item)">{{item.code}}</li>
            </ul>
      </el-drawer>
      <WorkEnv :dialogWorkEnv="dialogWorkEnv" />
      <ResetWorkBench :dialogResetWorkBench="dialogResetWorkBench" />
      
      <UserInfo :dialogUserInfo="dialogUserInfo" />
      <el-dialog
                title="修改密码"
                ref="pwd"
                :visible.sync="passwordChangeVisible"
                width="40%"
        >
            <password-change ref="pwdComponent" :passwordChangeVisible.sync="passwordChangeVisible"> </password-change>
            <span slot="footer" class="dialog-footer">
                <el-button @click="passwordChangeVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePassword">确 定</el-button>
            </span>
        </el-dialog>
      <GlobalSet :globalSetVisible="globalSetVisible"></GlobalSet>
      <PageSet :showPageSet="showPageSet"></PageSet>
  </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil.js';
import { createNamespacedHelpers } from 'vuex';
const { mapMutations, mapActions,mapState,mapGetters } = createNamespacedHelpers('homeModule');
const { mapState:mapStateTag, mapMutations:mapMutationsTag } = createNamespacedHelpers('tagModule');
import WorkEnv from './headerDefault/WorkEnv';
import ResetWorkBench from './headerDefault/ResetWorkBench';
import PasswordChange from './headerHsj/PasswordChange';
import UserInfo from './headerDefault/UserInfo';
import GlobalSet from './app80/globalSet';
import PageSet from './headerCommon/pageSet';
import bus from '../common/bus';
export default {
    name: 'Header',
    data () {
        return {
            userName:appUtil.getSes('userName'),
            fullscreen:false, // 全屏标识
            envSetFlag: false, // 环境设置
            drawer:false, // 抽屉
            dialogWorkEnv:false, // 工作环境配置
            dialogResetWorkBench:false, // 重置工作台
            passwordChangeVisible:false, // 修改密码
            dialogUserInfo:false, // 更新个人信息
            themeIndex:0, // 主题列表索引
            searchValue:'',
            showPassword:'Y',
            globalSetVisible:false,
            showPageSet:false // 是否显示页面设置
        };
    },
    inject: ['mainChannel'],
    computed: {
        ...mapState({
            roleTheme:state => state.roleTheme,
            currentRoleTheme:state => state.currentRoleTheme,
            env:state => state.env,
            allvalue:state => state.allvalue,
            allvalueReal: state => state.allvalueReal,
            spectrumPaletteDate:state => state.spectrumPaletteDate
        }),
        ...mapStateTag({
            tagList:state => state.tagList,
            activeTag:state => state.activeTag
        }),
        ...mapGetters([
        ])
    },
    components: {
        WorkEnv,
        ResetWorkBench,
        PasswordChange,
        UserInfo,
        GlobalSet,
        PageSet
    },
    created () {
        
        
        // 获取所有主题
        // this.getRoleThemeAsync();
        
        if(this.env.loginSettings){
            this.showPassword = this.env.loginSettings.split(',')[12];
        }
    },
    methods: {
        ...mapMutations([
            'updateMenu',
            'updateRoleTheme'
        ]),
        ...mapMutationsTag([
            'switchActiveTag',
            'removeTag',
            'addTag',
            'updatedTag'
        ]),
        ...mapActions([
            // 'getRoleTheme',
            'getEnvAsync',
            'getThemeDetailsAsync',
            'getEngSwitchAsync'
        ]),
        isActive (url) {
            return url === this.activeTag.url;
        },
        expend () {
            this.updateMenu();
        },
        // 打开全局设置
        switGlobalSet(){
            this.globalSetVisible = true;
        },
        // 打开页面设置
        pageSetDialogOpen(){
            this.showPageSet = true;
        },
        // 关闭切换日期
        closeDate(){
            // console.log(1);
            this.globalSetVisible = false;
        },
        // 打开修改密码页面
        passwordDialogOpen(){
            this.passwordChangeVisible = true;
        },
        changePassword(){
            this.$refs.pwdComponent.submit();
        },
        // 切换标签
        switchTag (url) {
            this.switchActiveTag(url);
        },
        // 关闭单个标签
        closeTag (index, url) {
            this.removeTag({index:index,url:url});
        },
        // 全屏事件
        handleFullScreen () {
            const document = process.client ? document : {};
            let element = document.documentElement;
            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            let that = this;
            setTimeout(function(){
                that.$emit('initLayout');
            },50);
            this.fullscreen = !this.fullscreen;
        },
        

        // 设置主题颜色
        setThemeColor (item) {
            bus.$emit('setThemeColor',item);
            this.mainChannel.postMessage({
                colors:'#'+item.code.slice(1,7),
            });
        },
        // 关闭所有弹框
        closeALL () {
            this.envSetFlag = false;
            this.dialogWorkEnv = false;
            this.dialogResetWorkBench = false;
            this.dialogUserInfo = false;
            this.showPageSet = false;
        },
        // 弹出工作环境设置
        dialogWorkEnvFn () {
            this.dialogWorkEnv = true;
        },
        // 弹出重置工作台
        dialogWorkBenchFn () {
            this.dialogResetWorkBench = true;
        },
        
        // 弹出个人信息更新框
        dialogUserInfoFn(){
            this.dialogUserInfo = true;
        },
        // 切换主题
        roleThemeFn(item,index){
            // 根据主题id 获取主题详情
            //this.getThemeDetailsAsync(item.themeId);
            // 更新当前主题
            this.updateRoleTheme(item.themeId);
            this.themeIndex = index;
            // 切换主题
            this.getEngSwitchAsync(item.themeId);
            this.updatedTag(item);
        },
        logout(){
        //sessionStorage.clear();
        //console.log(location.href);
            function clearCookie(name) {
                setCookie(name, '', -1);
            }

            function setCookie(cname, cvalue, exdays) {
                let d = new Date();
                d.setTime(d.getTime() + (exdays*24*60*60*1000));
                let expires = 'expires='+d.toUTCString();
                const document = process.client ? document : {};
                document.cookie = cname + '=' + cvalue + '; ' + expires + '; path=/'; // 崔立国 20190226 必须删除根目录（path=/）的cookie。
                document.cookie = cname + '=' + cvalue + '; ' + expires;
            }

            
            

            clearCookie('tokenid');
            clearCookie('username');
            clearCookie('JSESSIONID');
            this.$axios.get('/pf/login/loginOut.do').then((res) => {
                if(res&&res.data&&res.data.url){
                   
                    window.location.href = res.data.url;
                }else{
                    
                    window.location.href = '/pf/portal/login/login.html';
                }
               
            }).catch(() => {
                console.error('退出登录异常');
              
                window.location.href = '/pf/portal/login/login.html';
            });
            
        },
        // 搜索
        searchFn(){
            // searchValue
            this.addTag({ url: window.location.href.split('#')[0]+'#/SearchResult?r='+this.searchValue, name: '搜索结果页'});
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header::before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.header{
    height: 100%;
    background: url('~/assets/img/board/topBg.png');
    background-size: 100%;
    display: flex;
    .leftBox {
        float: left;
        width: 73px;
        color: #fff;
        text-align: center;
        height: 80px;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
        .iconExpand{
            margin-top: 20px;
        }
        p{
            font-size: 12px;
        }
    }
    
    .rightBox{
        flex: 1;
        position: relative;
        .portalName{
            font-size: 20px;
            margin-top: 9px;
            margin-left: 30px;
            color: #fff;
        }
        .serviceCall{
            width: 184px;
            height: 25px;
            line-height: 25px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 100px 0px 0px 100px;
            color: #F7B500;
            position: absolute;
            right: 0;
            top: 48px;
            text-align: center;
        }
        .tags_gd{
            position: absolute;
            bottom: 0;
            left: 0;
            height: 40px;
            .clearfix{
                clear: both;
            }
            li{
                display: inline-block;
                position: relative;
                cursor: pointer;
                top: 4px;
                span{
                    float: left;  
                }
                .tagClose{
                    position: absolute;
                    right: 16px;
                    top: 16px;
                    font-size: 12px;
                    display: none;
                }
                
                .leftTab{
                    background: url(~/assets/img/board/tabLeft.png) no-repeat;
                    background-size: cover;
                    // display: inline-block;
                    width: 32px;
                    height: 37px;
                }
                .centerTab{
                    background: url(~/assets/img/board/tabCenter.png) repeat;
                    background-size: contain;
                    // display: inline-block;
                    min-width: 32px;
                    height: 37px;
                    line-height: 44px;
                }
                .rightTab{
                    background: url(~/assets/img/board/tabRight.png) no-repeat;
                    background-size: cover;
                    // display: inline-block;
                    width: 32px;
                    height: 37px;
                }
            }
            li:hover{
                    .tagClose{
                        display: block;
                    }
                }
            li.active{
                z-index: 101!important;
                .leftTab{
                    background: url(~/assets/img/board/tabLeftActive.png) no-repeat;
                    background-size: cover;
                    
                }
                .centerTab{
                    background: url(~/assets/img/board/tabCenterActive.png) repeat;
                    background-size: contain;
                    
                }
                .rightTab{
                    background: url(~/assets/img/board/tabRightActive.png) no-repeat;
                    background-size: cover;
                }
            }
        }
    }
    .rightTopMenu{
        position: absolute;
        top: 10px;
        right: 0;
        color: #fff;
        .rightspace{
            margin-right: 30px;
            height: 32px;
            line-height: 32px;
            color: #fff;
            .bot{
                font-size: 14px;
            }
        }
        .downTheme{
            position: relative;
            .icon-icon-angle-bottom{
                font-size: 12px;
                
            }
            .themeList{
                position: absolute;
                right: -10px;
                z-index: 2;
                background: #fff;
                box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
                color: #333;
                width: 160px;
                border-radius: 4px;
                li{
                    cursor: pointer;
                    padding: 0 10px;
                    i{
                        font-size: 14px;
                        margin-right: 6px;
                    }
                }
            }
        }
        .searchBox{
            width: 300px;
             .el-input__inner{
                background: transparent;
                border-radius: 4px;
                border: 1px solid rgba(255, 255, 255, 0.5);
                color: #fff;
            }
             .el-icon-search{
                color: #fff;
            }
        }
    }
    .expanded{
        margin: 16px;
        cursor: pointer;
    }
    #spectrumPalette{
        li{
            width: 30px;
            height: 30px;
            border: 1px solid #d0d0d0;
            margin: 2px;
            float: left;
            font-size: 0;
            cursor: pointer;
        }
    }
     .el-drawer__header{
        color: #333;
        font-size: 16px;
        margin-bottom: 20px;
        
    }
     .el-drawer__body{
        padding: 0 20px;
        p{
            margin: 10px 0;
            font-size: 14px;
        }
    }
     .el-dialog__header{
        padding-bottom: 0;
        border-bottom: 1px solid #eee;
        padding-bottom: 16px;
    }
     .el-dialog__title{
        font-size: 16px;
        color: #555;
        font-weight: 800;
        
    }
     .el-dialog__body{
        padding-top: 10px;
    }
     .el-date-editor.el-input{
        width: 240px;
    }
     .el-select>.el-input{
        width: 240px;
    }
     :focus {
        outline: 0;
    }
}

</style>
